<template>
  <div class="centerall">
    <el-container class="ct-container">
      <LeftMenu></LeftMenu>
      <div class="con-all">
        <router-view v-slot="{ Component }" :key="key">
          <transition :name="transitionName" mode="out-in">
            <keep-alive exclude="songsheet">
              <component :is="Component" />
            </keep-alive>
          </transition>
        </router-view>
      </div>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import LeftMenu from '../cpns/left-menu.vue'

export default defineComponent({
  components: {
    LeftMenu
  },
  setup() {
    const route = useRoute()
    const transitionName = ref('')
    const key = computed(() => {
      return route.path + Date.now()
    })
    return {
      transitionName,
      key
    }
  }
})
</script>

<style scoped lang="less">
.centerall {
  position: relative;
  width: 100%;
  min-height: 730px;
  height: 730px;

  .ct-container {
    width: 100%;
    height: 100%;
    border: 1px solid #eee;

    .con-all {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
  }
}
</style>
